<template>
    <div class="account-bind">
        <dl>
            <dt class="bind-title">
                账号安全
            </dt>
            <dd class="bind-item">
                <i class="iconfont">&#xe75d;</i>
                <div class="bind-introduction">
                    <p class="bind-title">
                        <span class="bind-type">{{ `邮箱` }}</span>
                        {{ userInfo.email + ` 已绑定`}}
                    </p>
                    <p class="bind-subtitle">
                        {{ `可用邮箱加密码登录慕课网，可用邮箱找回密码` }}
                    </p>
                </div>
            </dd>
            <dd class="bind-item">
                <i class="iconfont">&#xe61a;</i>
                <div class="bind-introduction">
                    <p class="bind-title">
                        <span class="bind-type">{{ `手机` }}</span>
                        {{ userInfo.mobile + ` 已绑定`}}
                    </p>
                    <p class="bind-subtitle">
                        {{ `可用手机号加密码登录慕课网，可通过手机号找回密码` }}
                    </p>
                </div>
            </dd>
            <dd class="bind-item">
                <i class="iconfont">&#xe61e;</i>
                <div class="bind-introduction">
                    <p class="bind-title">
                        <span class="bind-type">{{ `密码` }}</span>
                        {{  `已设置`}}
                    </p>
                    <p class="bind-subtitle">
                        {{ `用于保护账号信息和登录安全` }}
                    </p>
                </div>
                <el-button class="password-btn" @click="editPassword">修改密码</el-button>
            </dd>
        </dl>

        <!-- 修改密码表单 -->
        <PasswordForm ref="passwordForm" onSaveSuccess="fetchData"/>
    </div>
</template>
<script>
  import {getInfo, getUserById} from '@/api/user';

  export default {
    inject: ['reload'],
    data () {
      return {
        userInfo: {}
      }
    },
    methods: {
      // 获取用户信息
      getUserInfo () {
        getInfo().then(result => {
          let {code, data} = result
          if (code === 20000) {
            getUserById(data.userInfo.id).then(result => {
              let {code, data} = result
              if (code === 20000) {
                this.userInfo = data.item
              }
            })
          }
        })
      },

      editPassword(){
        this.$refs.passwordForm.open()
      },

      fetchData(){
        this.reload()
      }
    },
    mounted () {
      this.getUserInfo()
    },

    components:{
      PasswordForm: () => import('@/pages/user-center/password-form')
    }
  }
</script>

<style lang="stylus" scoped>
    .account-bind
        .last-login-record
            margin-bottom: 20px;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            background-color: #fff4e5;
            transition: all 0.1s linear;
            opacity: 1;
            font-size: 12px;
            color: #f56108;

            .iconfont
                float: right;
                margin-right: -10px;
                padding: 0 10px;
                cursor: pointer;
                font-size: 12px;

            & > span
                color: #008cc8;
                cursor: pointer;

        .bind-title
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-weight: 700;
            color: #333;

            .bind-rate
                margin-left: 15px;
                font-size: 12px;
                color: #93999f;

                & > strong
                    font-weight: 700;
                    color: #ef1514

        .bind-item
            display: flex;
            align-items: center;
            height: 88px;
            padding: 0 15px;
            border-top: 1px solid #d0d6d9;

            .iconfont
                flex: 0 0 60px
                width: 60px;
                height: 100%;
                line-height: 88px;
                margin-right: 20px;
                font-size: 36px;
                color: #d9dde1;
                text-align: center;

            .bind-introduction
                flex: 1;
                position: relative;

                .bind-title
                    font-size: 14px;
                    color: #2b333b;
                    font-weight: 400;

                    .bind-type
                        font-size: 16px;
                        font-weight: 700;
                        color: #333;

                .bind-subtitle
                    font-size: 14px;
                    color: #93999f;

                .social-list
                    position: absolute;
                    left: 0;
                    top: 80px;

                    .social-item
                        display: inline-flex;
                        align-items: center;
                        margin-right: 60px;

                        .iconfont
                            display: inline-block;
                            margin-right: 10px;
                            width: 80px;
                            height: 80px;
                            font-size: 80px;
                            text-align: center;
                            line-height: 80px;
                            color: #c8cdd2;

                            &.blue
                                color: #0788CA;

                            &.green
                                color: #13BC6C;

                            &.yellow
                                color: #FDD449;

                        .social-content
                            display: inline-block;
                            margin-top: 4px;

                            .social-type
                                font-size: 16px;
                                color: #333;
                                font-weight: 700;

                            .social-bind-type
                                margin: 5px 0 8px;
                                font-size: 12px;
                                color: #ef1514;

                                &.green
                                    color: green;

                            .social-bind-btn
                                padding: 3px 5px;
                                font-size: 12px;
                                border: 1px solid #d9dde1;
                                cursor: pointer;
    .password-btn{
        color: #FFFFFF;
        background-color: #ef1514;
        border-color #ef1514;
    }
</style>
